<template>
  <div class="general-coupon">
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>通用优惠券页面</el-menu-item>
      </el-menu>
    </div>
    <el-container>
      <!-- 内容 -->
      <el-main>
        <el-card class="box-card" shadow="never">
          <!-- 查询框 -->
          <el-form :inline="true" class="demo-form-inline" ref="couponFrom" :model="couponFrom">
            <el-form-item label="优惠券：" prop="name">
              <el-input placeholder="优惠券名称" v-model.trim="couponFrom.name"></el-input>
            </el-form-item>

            <!-- 时间选择器 -->
            <el-form-item prop="time" label="时间:" style="margin-left: 50px">
              <el-date-picker v-model.trim="couponFrom.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"> </el-date-picker>
            </el-form-item>

            <!-- 按钮 -->
            <el-form-item>
              <el-button class="query" @click="onSubmit()">查询</el-button>
              <el-button class="reset" @click="resetForm('couponFrom')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 新增优惠券按钮和数据统计 -->
        <div class="statistics" :data="couponList">
          <div class="left">
            <el-button type="mini" class="addCoupon" @click="$router.push('/add-coupon')" style="margin-top: 10px">新增优惠券</el-button>
          </div>
          <template>
            <div class="right">
              <p>发放总数量:{{ issued }}张</p>
              <p>领取总金额:{{ getMoney }}元</p>
            </div>
          </template>
        </div>
        <!-- 优惠券列表 -->
        <el-table style="width: 100%" :data="couponList">
          <el-table-column prop="name" label="优惠券名称" width="180"> </el-table-column>
          <el-table-column prop="money" label="优惠券金额/元" width="180"> </el-table-column>
          <el-table-column prop="restrict" label="使用金额限制"> </el-table-column>
          <el-table-column prop="time_limit" label="使用时限/天"> </el-table-column>
          <el-table-column prop="get_limit" label="领取限制/张"> </el-table-column>
          <el-table-column prop="total_issued" label="发放总数量/张"> </el-table-column>
          <el-table-column prop="getMoney" label="领取金额/元"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" :id="scope.row.id" @click="edit(scope.row.id), $router.push('/edit-coupon')"> 编辑 </el-button>
              <el-button size="mini" type="danger" @click="remove(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 分页区域 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'

export default {
  name: 'GeneralCoupon',
  props: [''],
  data () {
    return {
      // 所有列表的数据
      couponList: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 总数据条数
      total: 0,
      couponFrom: {
        name: '',
        time: ''
      }
    }
  },
  created () {
    this.getCouponList()
  },

  components: {},

  computed: {
    issued () {
      let issued = 0
      this.couponList.map((couponList) => {
        if (typeof (couponList.total_issued) === 'number') {
          issued += couponList.total_issued
        }
      })
      return issued
    },
    getMoney () {
      let getMoney = 0
      this.couponList.map((couponList) => {
        if (typeof (couponList.getMoney) === 'number') {
          getMoney += couponList.getMoney
        }
      })
      return getMoney
    }
  },

  beforeMount () { },

  mounted () { },

  methods: {
    // 获取数据列表
    async getCouponList () {
      const { data } = await this.$http.get(`/general_discount_coupon? _page=${this.queryInfo.pagenum}&_limit=${this.queryInfo.pagesize}`)
      // console.log(data.length)
      this.couponList = data
      // console.log(this.couponList)
      this.total = data.length
      // console.log(data)
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getCouponList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getCouponList()
    },
    // 删除角色
    remove (id) {
      this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.delete(`/general_discount_coupon/${id}`)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getCouponList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    edit (id) {
      // console.log(id)
      // console.log(this.couponList)
      localStorage.setItem('edit.id', id)
    },
    // 点击重置按钮表单重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getCouponList()
    },
    // 点击查询提交表单
    async onSubmit () {
      // 如果没有选择或者输入任何条件, 查询所有数据
      if (this.couponFrom.name === '') {
        return this.getCouponList()
      }
      // 先将数据清空
      this.couponList = []
      // 按照编号发送请求进行模糊查询
      if (this.couponFrom.name !== '') {
        const { data } = await this.$http.get(`/general_discount_coupon?name_like=${this.couponFrom.name}`)
        // console.log(data)
        this.couponList = data
      }
      // 时间
      var startDate = ''
      var endDate = ''
      if (this.couponFrom.time[0] !== '') {
        // 转换字符串格式代码 为请求做准备
        startDate = dayjs(this.couponFrom.time[0]).format('YYYY-MM-DD')
        // console.log(this.startDate)
      }
      // 如果第二个事件表单项 time2 不为空
      if (this.couponFrom.time[1] !== '') {
        // 转换字符串格式代码 为请求做准备
        endDate = dayjs(this.couponFrom.time[1]).format('YYYY-MM-DD')
      }
      // console.log(startDate, endDate)

      // 拼接GET请求查询参数
      const filter = startDate ? 'time_gte=' + startDate + '&' + 'time_lte=' + endDate : ''
      // // 如果 开始时间为空
      // if (this.filter === '') {
      //   this.filter += endDate ? 'time_lte=' + endDate : ''
      // } else {
      //   // 开始时间不为空,
      //   this.filter += endDate ? '&time_lte=' + endDate : ''
      // }
      // console.log(`/general_discount_coupon?${filter}`)

      const { data } = await this.$http.get(`/general_discount_coupon?${filter}`)
      // console.log(data)
      data.forEach((item) => {
        // console.log(item)
        if (!this.couponList.find((subitem) => subitem.id === item.id)) {
          this.couponList.push(item)
        }
      })
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
.general-coupon {
  width: 100%;
  .el-header {
    color: #333;
    height: 70px !important;
    padding: 0;
    width: 100%;
    .el-row {
      margin-top: 32px;
      padding-left: 20px;
    }
    .el-button {
      margin-left: 0;
    }
  }
  .el-main {
    padding-left: 40px;
    color: #333;
    text-align: center;
  }
}
.demo-form-inline {
  margin-right: 140px;
}
.demonstration {
  margin-left: 160px;
  margin-right: 15px;
}
.query {
  margin-left: 160px;
}
.reset {
  margin-left: 50px !important;
}
.addCoupon {
  background-color: paleturquoise;
  color: #fff;
  border-color: transparent;
}
.statistics {
  display: flex;
  justify-content: space-between;
  .right {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    p {
      margin-right: 50px;
    }
  }
}
.block {
  margin-left: 40px;
}
/deep/.el-card__body {
  border: 1px solid #000;
  border-radius: 6px;
}
.el-table {
  border: 1px solid #000;
  border-radius: 6px;
  padding: 10px;
}
.statistics {
  height: 50px;
}
</style>
